<template>
	<div class="playerinformation">
		<!-- 查询表单 -->
		<el-form label-width="80px" class="search">
		  <el-form-item label="物品申请编号">
		    <el-input v-model="name" placeholder="请输入物品申请编号"></el-input>
		  </el-form-item>
		  <!-- <el-form-item label="出入状态">
			<el-select v-model="type" placeholder="请选择出入状态">
			<el-option label="入库" value="1"></el-option>
			<el-option label="出库" value="2"></el-option>
			</el-select>
		  </el-form-item> -->
		  <el-form-item label="申请时间">
			<el-col :span="11">
			<el-date-picker type="date" placeholder="选择日期" v-model="date1" style="width: 150px;"></el-date-picker>
			</el-col>
		  </el-form-item>
		</el-form>
		<!-- 查询按钮 -->
		<el-button type="primary" @click="search()">查询</el-button>
		<!-- 添加表单 -->
		<el-button type="success" @click="isAdd()">添加</el-button>
		<el-dialog title="物品申请" :visible.sync="dialogFormVisible" >
			<el-form :model="form">
				<el-form-item label="物品编号" :label-width="formLabelWidth">
					<el-input v-model="form.goodsId" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="物品数量" :label-width="formLabelWidth">
					<el-input v-model="form.number" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="申请人编号" :label-width="formLabelWidth">
					<el-input v-model="form.positionId" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="申请描述" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form.desc"></el-input>
				</el-form-item>
				<!-- <el-form-item label="出入状态" :label-width="formLabelWidth">
					<el-select v-model="form.state" placeholder="请选择出入状态">
						<el-option label="入库" value="1"></el-option>
						<el-option label="出库" value="2"></el-option>
					</el-select>
				</el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 表格分页 -->
		<el-table
		    :data="tableData"
		    border
			fit
		    style="width: 100%">
		    <el-table-column fixed prop="manaId" label="物品申请编号"></el-table-column>
        <el-table-column fixed prop="goodsId" label="物品编号"></el-table-column>
			<el-table-column prop="number" label="物品数量"></el-table-column>
		    <el-table-column prop="positionId" label="申请职工编号"></el-table-column>
		    <el-table-column prop="desc" label="申请描述"></el-table-column>
			<!-- <el-table-column prop="state" label="出入状态"></el-table-column> -->
			<el-table-column prop="regTime" label="登记时间"></el-table-column>
		    <el-table-column fixed="right" label="操作">
		      <template slot-scope="scope">
            <div v-if="scope.row.type==0">
                <el-button type="text" size="small" @click="agree(scope.row.type)">通过</el-button>
                <el-button type="text" size="small" @click="noagree(scope.row.type)">不通过</el-button>
            </div>
            <div v-else-if="scope.row.type==1">
              <el-button type="text" style="color:green" disabled>通过</el-button>
            </div>
            <div v-else>
             <el-button type="text" style="color:red" disabled>不通过</el-button>
            </div>
		        <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> -->
		       
		      </template>
		    </el-table-column>
		</el-table>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="1000">
		</el-pagination>
	</div>
</template>

<script>
	export default{
		name:"PlayerINformation",
		data(){
			return{
				name:"",
				type:"",
				nickname:"",
				uid:"",
				date1:"",
				tableData: [{
          manaId:'0001',
						goodsId:'0001',
						number: '61',
						positionId:'CSDN001',
						desc:'迪迦',
						state:'入库',
						regTime:'2021-7-16 17::17:17',
            type:0
					}, {
            manaId:'0002',
						goodsId:'0002',
						number: '62',
						positionId:'CSDN002',
						desc:'泰罗',
						state:'出库',
						regTime:'2021-7-16 17::17:17',
            type:2
					}, {
            manaId:'0003',
						goodsId:'0003',
						number: '63',
						positionId:'CSDN003',
						desc:'赛文',
						state:'入库',
						regTime:'2021-7-16 17::17:17',
            type:1
					}, {
            manaId:'0004',
						goodsId:'0004',
						number: '64',
						positionId:'CSDN004',
						desc:'雷欧',
						state:'出库',
						regTime:'2021-7-16 17::17:17',
            type:0
					}],
				dialogFormVisible: false,
				form: {
					goodsId: '',
					number: '',
					positionId: '',
					desc: '',
					state: '',
					delivery: false,
				},
				formLabelWidth: '120px'
			}
		},
		methods:{
			//查看
			handleClick(row) {
				console.log(row);
				this.form.goodsId=row.goodsId;
				this.form.number=row.number;
				this.form.positionId=row.positionId;
				this.form.desc=row.desc;
				this.form.state=row.state;
				this.dialogFormVisible=true;
			},
			search(){
				console.log(this.name,this.nickname,this.uid);
			},
			isAdd(){
				this.form.goodsId='';
				this.form.number='';
				this.form.positionId='';
				this.form.desc='';
				this.form.state='';
				this.dialogFormVisible=true;
			},
      agree(type){
        console.log("通过操作");
        type=1;
      },
      noagree(type){
        console.log("通过操作");
        type=2;
      }
			// isDelete() {
			// 	this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
			// 		confirmButtonText: '确定',
			// 		cancelButtonText: '取消',
			// 		type: 'warning'
			// 		}).then(() => {
			// 		this.$message({
			// 			type: 'success',
			// 			message: '删除成功!'
			// 		});
			// 		}).catch(() => {
			// 		this.$message({
			// 			type: 'info',
			// 			message: '已取消删除'
			// 		});          
			// 	});
			// }
		}
	}
</script>

<style scoped="scoped">
	.search{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
	.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-pagination{
	  margin: 20px;
	  text-align: right;
  }

  .el-dialog .el-form{
	  width: 500px;
  }
</style>
